//=====================折线图======================
function lineChart(data) {
  let myChart = echarts.init(document.querySelector("#line"));
  let option = {
    title: {
      text: "2022全学科薪资走势", //标题
      top: "15", //标题文本距离顶部
      left: "10", //距离左侧
      textStyle: {
        fontSize: "16", //文字大小
      },
    },
    xAxis: {
      type: "category",
      data: data.map((item) => item.month),
      //  [
      //   "1月",
      //   "2月",
      //   "3月",
      //   "4月",
      //   "5月",
      //   "6月",
      //   "7月",
      //   "8月",
      //   "9月",
      //   "10月",
      //   "11月",
      //   "12月",
      // ],
      axisLabel: {
        color: "#999",
      },
      axisLine: {
        lineStyle: {
          type: "dashed",
          color: "#ccc",
        },
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        data: data.map((item) => item.salary),
        //  [
        //   9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000,
        //   15000, 19000,
        // ],
        type: "line",
        smooth: true, //平滑曲线
        symbolSize: 10, //圆圈大小
        lineStyle: {
          width: 6, //线条粗细
        },
        //设置当前的背景渐变图
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#499FEE", // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: "rgba(255,255,255,0.2)", // 80% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255,255,255,0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
    tooltip: {
      trigger: "axis", //鼠标移入提示
    },
    gird: {
      top: "20%", //网格
    },
    //线条颜色
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "#499FEE", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "#5D75F0", // 100% 处的颜色
        },
      ],
      global: false, // 缺省为 false
    },
  };
  myChart.setOption(option);
}
//lineChart();
//=====================饼图右上角==================
function classSalaryChart(data) {
  let myChart = echarts.init(document.querySelector("#salary"));
  let option = {
    title: {
      text: "班级薪资分布",
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "7%",
      itemWidth: 15,
    },
    color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
    series: [
      {
        name: "班级薪资分布", // 鼠标移入提示这个名字
        type: "pie",
        radius: ["50%", "64%"], //内径和外径
        avoidLabelOverlap: false,

        //每一项设置
        itemStyle: {
          borderRadius: 10, //圆角
          borderColor: "#fff", //每一个间隙
          borderWidth: 2,
        },
        //
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: data.map((item) => {
          return { value: item.g_count + item.b_count, name: item.label };
        }),
        //  [
        //   { value: 1048, name: "1万以下  " },
        //   { value: 735, name: "1万-2万" },
        //   { value: 580, name: "1.5万-2万" },
        //   { value: 484, name: "2万以上" },
        // ]
      },
    ],
  };
  myChart.setOption(option);
}
// classSalaryChart();
//=====================柱状图======================
function linesChart(student) {
  console.log(student);
  let myChart = echarts.init(document.querySelector("#lines"));
  let option = {
    xAxis: {
      type: "category",
      data: student[1].map((item) => item.name),
      axisLabel: {
        color: "#999",
      },
      axisLine: {
        lineStyle: {
          color: "#999",
          type: "dashed",
        },
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    tooltip: {
      trigger: "axis", //鼠标移入提示
    },
    gird: {
      left: 30,
      bottom: 70,
    },
    series: [
      {
        data: student[1].map((item) => item.hope_salary),
        // [
        //   12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320, 16500, 12000,
        // ],
        type: "bar",
        name: "期望薪资",
      },
      {
        data: student[1].map((item) => item.salary),
        // [
        //   22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320, 18000, 12687,
        // ]
        type: "bar",
        name: "就业薪资",
      },
    ],
    color: [
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#34D39A", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "rgba(52,211,154,0.2)", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#499FEE", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "rgba(73,159,238,0.2)", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    ],
  };
  myChart.setOption(option);

  //注册点击事件
  const btn = document.querySelector("#btns");
  btn.addEventListener("click", function (e) {
    if (e.target.tagName === "BUTTON") {
      //console.log(1233);
      document.querySelector("#btns .btn-blue").classList.remove("btn-blue");
      e.target.classList.add("btn-blue");
      let i = e.target.innerHTML.trim();
      //console.log(student[i].map((item) => item.name));
      option.xAxis.data = student[i].map((item) => item.name);
      option.series[0].data = student[i].map((item) => item.hope_salary);
      option.series[1].data = student[i].map((item) => item.salary);
      myChart.setOption(option);
    }
  });
}
//linesChart();
//=====================饼图左下角==================
function genderChart(data) {
  let myChart = echarts.init(document.querySelector("#gender"));
  let option = {
    title: [
      {
        text: "班级薪资分布",
        top: 15,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      {
        text: "男生",
        top: "45%",
        left: "45%",
        textStyle: {
          fontSize: 12,
        },
      },
      {
        text: "女生",
        top: "85%",
        left: "45%",
        textStyle: {
          fontSize: 12,
        },
      },
    ],
    tooltip: {
      trigger: "item",
    },
    color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],

    series: [
      {
        name: "班级薪资分布", // 鼠标移入提示这个名字
        type: "pie",
        radius: ["20%", "30%"], //内径和外径
        avoidLabelOverlap: false,
        center: ["50%", "30%"],
        data: data.map((item) => {
          return { value: item.b_count, name: item.label };
        }),
        // [
        //   { value: 1048, name: "1万以下  " },
        //   { value: 735, name: "1万-2万" },
        //   { value: 580, name: "1.5万-2万" },
        //   { value: 484, name: "2万以上" },
        // ],
      },
      {
        name: "班级薪资分布", // 鼠标移入提示这个名字
        type: "pie",
        radius: ["20%", "30%"], //内径和外径
        avoidLabelOverlap: false,
        center: ["50%", "70%"],
        data: data.map((item) => {
          return { value: item.g_count, name: item.label };
        }),
        //  [
        //   { value: 1048, name: "1万以下  " },
        //   { value: 735, name: "1万-2万" },
        //   { value: 580, name: "1.5万-2万" },
        //   { value: 484, name: "2万以上" },
        // ],
      },
    ],
  };
  myChart.setOption(option);
}
//genderChart();
//=====================地图=======================
function mapChart(data) {
  const mapData = [
    { name: "南海诸岛", value: 0 },
    { name: "北京", value: 3 },
    { name: "天津", value: 2 },
    { name: "上海", value: 4 },
    { name: "重庆", value: 1 },
    { name: "河北", value: 20 },
    { name: "河南", value: 23 },
    { name: "云南", value: 0 },
    { name: "辽宁", value: 15 },
    { name: "黑龙江", value: 12 },
    { name: "湖南", value: 2 },
    { name: "安徽", value: 5 },
    { name: "山东", value: 18 },
    { name: "新疆", value: 0 },
    { name: "江苏", value: 5 },
    { name: "浙江", value: 1 },
    { name: "江西", value: 4 },
    { name: "湖北", value: 3 },
    { name: "广西", value: 2 },
    { name: "甘肃", value: 9 },
    { name: "山西", value: 11 },
    { name: "内蒙古", value: 14 },
    { name: "陕西", value: 14 },
    { name: "吉林", value: 10 },
    { name: "福建", value: 0 },
    { name: "贵州", value: 0 },
    { name: "广东", value: 0 },
    { name: "青海", value: 3 },
    { name: "西藏", value: 0 },
    { name: "四川", value: 1 },
    { name: "宁夏", value: 1 },
    { name: "海南", value: 0 },
    { name: "台湾", value: 0 },
    { name: "香港", value: 0 },
    { name: "澳门", value: 0 },
  ];
  //在模板数据 返回数据 前渲染
  console.log(data);
  mapData.forEach((item) => {
    let ApiData = data.find((ele) => ele.name.includes(item.name));
    if (ApiData) {
      item.value = ApiData.value;
    }
  });
  //===============================================
  let myChart = echarts.init(document.querySelector("#map"));
  let option = {
    title: {
      text: "籍贯分布", //标题
      top: "15", //标题文本距离顶部
      left: "10", //距离左侧
      textStyle: {
        fontSize: "16", //文字大小
      },
    },
    series: [
      {
        name: "籍贯分布",
        data: mapData, //传入地图数据
        type: "map", //图表的类型是地图
        map: "china", //中国地图
        //有了以上这两项
        //文字显示
        label: {
          show: true,
          fontSize: 10,
        },
        itemStyle: {
          // 默认每个省的样式
          areaColor: "#E0FFFF", // 每个省的颜色
          borderColor: "rgba(0, 0, 0, 0.2)",
        },

        //高亮状态
        emphasis: {
          itemStyle: {
            areaColor: "#34D39A",
            shadowColor: "rgba(0, 0, 0, 0.8)",
            shadowBlur: 20,
            shadowOffsetX: 5,
            shadowOffsetY: 5,
          },
        },
      },
    ],
    tooltip: {
      borderColor: "#333",
      backgroundColor: "rgba(0,0,0,0.5)",
      textStyle: {
        color: "#fff",
      },
      //{a}:series 中name的值
      //{b}:series 中省的值
      formatter: "{b}:  {c}位学员",
    },
    //组件
    visualMap: {
      type: "continuous",
      show: true,
      text: [20, 0],
      max: 20,
      min: 0,
      left: 15,
      bottom: 5,
      inRange: { color: ["#fff", "#0075F0"] },
    },
  };
  myChart.setOption(option);
}
//mapChart();

//-----------------------------------------------------
//发送请求
axios({
  url: "/dashboard",
  headers: {
    Authorization: localStorage.getItem("token"),
  },
}).then((result) => {
  //console.log(result.data.data);
  const { groupData, overview, provinceData, salaryData, year } =
    result.data.data;
  //console.log(groupData); //柱状图
  //console.log(overview); //上面数据
  // console.log(provinceData); //地图
  // console.log(salaryData); //饼图数据
  //console.log(year); //折线图
  //==================整合 ===========================
  //console.log(result.data)
  //const data = result.data;
  // for (let key in data) {
  //   console.log(data[key]);
  //   if (data[key] === overview) {
  //     console.log(123);
  //     //document.querySelector(`[name= ${overview.key}]`).innerHTML = overview[key];
  //   }
  // }
  //========================= overview ==========
  for (let key in overview) {
    //console.log(key);
    document.querySelector(`[name= ${key}]`).innerHTML = overview[key];
  }
  //========================= groupData ==========
  linesChart(groupData);
  //========================= year ===============
  for (let key in year) {
    //console.log(year[key]);
    lineChart(year);
  }
  //========================= salaryData =========
  for (let key in salaryData) {
    //console.log(salaryData);
    classSalaryChart(salaryData); //饼图右上角
    genderChart(salaryData); //饼图左下角
  }
  //========================= provinceData ========
  mapChart(provinceData);
});
